<template>
	<!-- 神评论开始 -->
	<div class="clips_comment_gods">

		<div class="clips_comment_gods_perfect">

			<div class="god_perfect_title">

				<h2>精彩评论</h2>

			</div>

			<!-- 神评论区 -->
			<div class="god_prefect_icon clearFix">

				<div class="god_prefect_icon_left"></div>

				<div class="god_prefect_user">

					<h3>脑残粉^_*</h3>

					<p><span>32楼</span>&nbsp;<span>2015-03-22</span></p>

				</div>

				<div class="god_prefect_like ">
					<p>506</p>
				</div>

				<div class="god_prefect_share " @click='replyPage()'>

				</div>
				<!-- 加入回复按钮 -->
				<div class="replyPage">

					<div class="replyPage_big">

						<div class="replyPage_big_reply" @click='big_reply()'>
							<p> 回复</p>
						</div>

						<div class="replyPage_big_share" @click.stop='sharePage'>
							<p>分享</p>
						</div>

						<div class="replyPage_big_peo"></div>

					</div>

				</div>

				<!-- 加入回复按钮结束 -->
				<div class="clear"></div>
				<div class="god_prefect_content">
					我是偶尔一次在电视上看到唱我们脑残，就痴迷到爱上了他们， 随便别人怎么说，我都会一直爱下去！！痴迷！痴迷！痴迷！痴迷！痴迷！
				</div>

				<!-- 加入输入回复框 开始-->

				<div class="god_prefect_backgound">

					<div class="god_prefect_bottom">

						<input type="text" name="" @blur='trend()' class="god_prefect_input" placeholder='请输入回复内容'>

					</div>

				</div>

				<!-- 加入输入回复框 结束 -->

			</div>

			<div class="god_prefect_icon clearFix">

				<div class="god_prefect_icon_left"></div>

				<div class="god_prefect_user">

					<h3>伪装个个儿</h3>

					<p><span>58楼</span>&nbsp;<span>2015-03-02</span></p>

				</div>

				<div class="god_prefect_like like_active">
					<p>329</p>
				</div>

				<div class="god_prefect_share ">

				</div>
				<div class="clear"></div>
				<div class="god_prefect_content">
					我爱他们的灵魂大于肉体~~
				</div>

			</div>

			<!-- 回复收起区 -->

			<div class="god_perfect_reply">

				<h3>收起回复</h3>

				<div class="clear"></div>

				<div class="god_prefect_reply_list">

					<!-- 回复的内容 -->

					<div class="reply_list_content">

						<p>
							<span>大哥就是我：</span>你是神经病吧！病的还不轻，吃药哈！
						</p>

						<span>1层</span>

						<span>2015-03-02</span>

					</div>

					<div class="reply_list_content">

						<p>
							<span>大哥就是我：</span>你是神经病吧！病的还不轻，吃药哈！
						</p>

						<span>1层</span>

						<span>2015-03-02</span>

					</div>

					<div class="reply_list_content">

						<p>
							<span>大哥就是我：</span>你是神经病吧！病的还不轻，吃药哈！
						</p>

						<span>1层</span>

						<span>2015-03-02</span>

					</div>

					<div class="see_more_reply">

						<router-link class='more_reply' :to="{path:'/clips/clips_comment/clips_comment_gods/comment_all_reply'}">
							查看更多回复...
						</router-link>

						<p>我也要说！</p>

					</div>

					<div class="clear"></div>

				</div>

				<div class="clear"></div>

			</div>

		</div>

		<!-- 全部评论区 -->

		<div class="clips_comment_gods_all ">
			<!-- 全部评论加载路由跳转 -->

			<h2>全部评论</h2>

			<div class="clips_comment_all_content">

				<div class="comment_all_content_left"></div>

				<div class="comment_all_content_user">

					<h3>唯物主义~神</h3>

					<p><span>1楼</span>&nbsp;<span>2015-03-02</span></p>

				</div>

				<div class="comment_all_content_like ">
					<p>16</p>
				</div>

				<div class="comment_all_content_share ">

				</div>
				<div class="clear"></div>
				<div class="comment_all_content_cont">
					你们这帮脑残们！！！他们就是大粑粑~
				</div>

			</div>

			<div class="clips_comment_all_content">

				<div class="comment_all_content_left"></div>

				<div class="comment_all_content_user">

					<h3>唯物主义~神</h3>

					<p><span>1楼</span>&nbsp;<span>2015-03-02</span></p>

				</div>

				<div class="comment_all_content_like ">
					<p>16</p>
				</div>

				<div class="comment_all_content_share ">

				</div>
				<div class="clear"></div>
				<div class="comment_all_content_cont">
					你们这帮脑残们！！！他们就是大粑粑~
				</div>

			</div>

			<!-- 评论框 -->
			<div class="clips_comment_gods_box">
				<div class="comment_gods_box_input">
					<input type="text" name="" placeholder="请输入评论内容...">

					<div class="box_input_icon">

					</div>
				</div>
			</div>
		</div>

		<!-- 分享到各种软件界面 -->

		<div class="share_page_soft" v-show='con'>

			<div class="share_page_soft_firend">

				<div class="page_soft_firend_wx">
					<p>微信</p>
				</div>

				<div class="page_soft_firend_qq">
					<p>朋友圈</p>
				</div>

				<div class="page_soft_firend_sina">
					<p>微博</p>
				</div>

			</div>

			<div class="share_page_cancel" @click='cancal()'>
				取消
			</div>
		</div>
		<!-- 分享各种界面结束 -->

	</div>

</template>

<script>
	// require('../../../less/clips/clips_comment_gods.less');

	export default {

		name: 'clips',

		data() {

			return {

				flag: true,
				con: false

			}
		},
		methods: {

			replyPage() {

				var replyPage = document.querySelector('.replyPage_big');

				if(this.flag) {

					replyPage.style.display = 'block';
					this.flag = false;
				} else {

					replyPage.style.display = '';

					this.flag = true;

				}
			},

			sharePage() {

				this.con = !this.con;

			},

			cancal() {

				var share_page_soft = document.querySelector('.share_page_soft');
				share_page_soft.style.display = 'none';
			},
			big_reply() {

				var big_reply = document.querySelector('.god_prefect_backgound');

				big_reply.style.display = 'block';

				var replyPage = document.querySelector('.replyPage_big');

				replyPage.style.display = '';

			},
			trend() {

				var big_reply = document.querySelector('.god_prefect_backgound');

				big_reply.style.display = '';

				big_reply.value = '';

			}

		}

	}
</script>

<style type="text/css" scoped lang='less'>
	.replyPage .replyPage_big {
		display: none;
		height: 80/64rem;
		cursor: pointer;
		width: 450/64rem;
		background: rgb(73, 61, 82);
		position: absolute;
		border-radius: 10/64rem;
		top: 25/64rem;
		right: 118/64rem;
		.replyPage_big_reply,
		.replyPage_big_share,
		.replyPage_big_peo {
			float: left;
			background-color: rgb(108, 89, 122);
			height: 60/64rem;
			margin-left: 10/64rem;
			margin-top: 10/64rem;
			border-radius: 8/64rem;
			color: white;
			font-size: 25/64rem;
			text-align-last: center;
			line-height: 60/64rem;
		}
		.replyPage_big_reply {
			width: 164/64rem;
			margin-left: 12/64rem;
			p {
				position: relative;
				margin-left: 36/64rem;
				&:before {
					content: '';
					height: 30/64rem;
					width: 30/64rem;
					display: inline-block;
					background: url('../../../../static/images/12/t1.png') no-repeat;
					background-size: 30/64rem 30/64rem;
					position: absolute;
					left: 0;
					top: 16/64rem;
				}
			}
		}
		.replyPage_big_share {
			width: 164/64rem;
			p {
				position: relative;
				margin-left: 36/64rem;
				&:before {
					content: '';
					height: 30/64rem;
					width: 30/64rem;
					display: inline-block;
					background: url('../../../../static/images/12/t2.png') no-repeat;
					background-size: 30/64rem 30/64rem;
					position: absolute;
					left: 0;
					top: 10/64rem;
				}
			}
		}
		.replyPage_big_peo {
			width: 70/64rem;
			/*  background: url('../../../../static/images/12/t3.png') no-repeat;

          background-size: 30/64rem 30/64rem;*/
			position: relative;
			&:after {
				content: '';
				height: 30/64rem;
				width: 30/64rem;
				display: inline-block;
				background: url('../../../../static/images/12/t3.png') no-repeat;
				background-size: 30/64rem 30/64rem;
				position: absolute;
				left: 20/64rem;
				top: 15/64rem;
			}
		}
	}
	/*分享界面组件*/
	
	.clips_comment_gods {
		position: relative;
		.share_page_soft {
			height: 300/64rem;
			width: 600/640*100%;
			position: fixed;
			bottom: 20/64rem;
			left: 20/64rem;
			right: 20/64rem;
			box-shadow: 0 0 200/64rem gray;
			.share_page_soft_firend {
				height: 200/64rem;
				width: 100%;
				background: white;
				border-radius: 20/64rem;
				.page_soft_firend_wx,
				.page_soft_firend_qq,
				.page_soft_firend_sina {
					height: 150/64rem;
					width: 100/64rem;
					float: left;
					margin-top: 30/64rem;
					font-size: 30/64rem;
					color: #434343;
					text-align-last: center;
					p {
						&::before {
							margin-bottom: 20/64rem;
						}
					}
				}
				.page_soft_firend_wx {
					margin-left: 60/64rem;
					p {
						&::before {
							content: '';
							display: block;
							height: 100/64rem;
							width: 100/64rem;
							background: url('../../../../static/images/12/x微信-1.png') no-repeat;
							background-size: 100/64rem 100/64rem;
						}
					}
				}
				.page_soft_firend_qq {
					margin-left: 90/64rem;
					p {
						&::before {
							content: '';
							display: block;
							height: 100/64rem;
							width: 100/64rem;
							background: url('../../../../static/images/12/x朋友圈-2.png') no-repeat;
							background-size: 100/64rem 100/64rem;
						}
					}
				}
				.page_soft_firend_sina {
					margin-left: 90/64rem;
					p {
						&::before {
							content: '';
							display: block;
							height: 100/64rem;
							width: 100/64rem;
							background: url('../../../../static/images/12/x微博-1.png') no-repeat;
							background-size: 100/64rem 100/64rem;
						}
					}
				}
			}
			.share_page_cancel {
				margin-top: 12/64rem;
				height: 85/64rem;
				width: 100%;
				background: white;
				border-radius: 10/64rem;
				box-shadow: 0 0 10/64rem gray;
				border-radius: 15/64rem;
				font-size: 40/64rem;
				color: rgb(190, 134, 238);
				text-align-last: center;
				line-height: 85/64rem;
				cursor: pointer;
			}
		}
	}
	/* 评论回复框*/
	
	.god_prefect_backgound {
		display: none;
		height: 85/64rem;
		width: 580/640*100%;
		margin-left: 40/64rem;
		background: url('../../../../static/images/13/回复底.png') no-repeat;
		background-size: contain;
		border-top: 1/64rem solid transparent;
		.god_prefect_bottom {
			height: 60/64rem;
			width: 500/64rem;
			background: url('../../../../static/images/13/回复输入框.png') no-repeat;
			background-size: contain;
			margin-left: 10/64rem;
			margin-top: 10/64rem;
			.god_prefect_input {
				height: 60/64rem;
				width: 500/64rem;
				border-radius: 10/64rem;
				outline: none;
				background: white;
			}
		}
	}
	/*神评论样式开始*/
	
	.clips_comment_gods .clips_comment_gods_perfect {
		.god_perfect_title {
			margin-top: 20/64rem;
			margin-left: 20/64rem;
			height: 30/64rem;
			width: (640-40)/640*100%;
			background: url('../../../../static/images/11/trim.png') no-repeat;
			background-size: (640-40)/640*100% 30/64rem;
			h2 {
				margin-left: 8/64rem;
				margin-top: 3/64rem;
				font-size: 26/64rem;
			}
		}
		/*精彩评论样式*/
		.god_prefect_icon {
			position: relative;
			.god_prefect_icon_left {
				height: 65/64rem;
				width: 65/64rem;
				background: url('../../../../static/images/11/head1.png') no-repeat;
				background-size: 65/64rem 65/64rem;
				margin-top: 30/64rem;
				margin-left: 30/64rem;
				float: left;
			}
			.god_prefect_user {
				float: left;
				margin-left: 20/64rem;
				h3 {
					font-size: 24/64rem;
					color: #b676eb;
					margin-top: 35/64rem;
				}
				p {
					color: #959595;
					;
					font-size: 24/64rem;
					margin-top: 8/64rem;
					span:nth-child(2) {
						margin-left: 20/64rem;
					}
				}
			}
			/*点赞功能*/
			.god_prefect_like {
				cursor: pointer;
				float: left;
				margin-top: 60/64rem;
				margin-left: 70/64rem;
				font-size: 25/64rem;
				color: #959595;
				position: relative;
				p::before {
					content: '';
					display: inline-block;
					height: 24/64rem;
					width: 24/64rem;
					background: url('../../../../static/images/11/zan_btn_normal.png') no-repeat;
					background-size: 24/64rem 24/64rem;
					position: absolute;
					right: 55/64rem;
					top: 3/64rem;
				}
			}
			.like_active {
				p {
					color: #b676eb;
					&::before {
						content: '';
						display: inline-block;
						height: 24/64rem;
						width: 24/64rem;
						background: url('../../../../static/images/11/zan_btn_selected.png') no-repeat;
						background-size: 24/64rem 24/64rem;
						padding-left: 13/64rem;
					}
				}
			}
			.god_prefect_share {
				float: right;
				background: url('../../../../static/images/11/more_btn_pressed.png') no-repeat;
				background-size: 60/64rem 40/64rem;
				height: 40/64rem;
				width: 60/64rem;
				margin-top: 50/64rem;
				margin-right: 40/64rem;
				position: relative;
				&::before {
					content: '';
					display: block;
					position: absolute;
					height: 12/64rem;
					width: 12/64rem;
					/*border-bottom:1/64rem solid rgb(208,200,222);*/
					border-left: 1/64rem solid rgb(208, 200, 222);
					top: 15/64rem;
					left: 1/64rem;
					background: rgb(250, 247, 255);
					-webkit-transform: rotate(45deg);
					-o-transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}
			.god_prefect_content {
				width: (490)/640*100%;
				margin-left: 110/64rem;
				margin-top: 30/64rem;
				font-size: 30/64rem;
				color: #313131;
				&::after {
					content: '';
					display: block;
					height: 1/64rem;
					width: 600/64rem;
					background: url('../../../../static/images/11/division.png') no-repeat;
					background-size: 600/64rem 1/64rem;
					margin-top: 48/64rem;
					margin-left: -85/64rem;
				}
			}
		}
		/*收起回复样式*/
		.god_perfect_reply {
			h3 {
				font-size: 25/64rem;
				margin-top: 26/64rem;
				color: #b676eb;
				float: right;
				margin-right: 40/64rem;
				&::after {
					content: '';
					display: inline-block;
					height: 15/64rem;
					width: 30/64rem;
					background: url('../../../../static/images/11/pickup_arrows.png') no-repeat;
					background-size: 25/64rem 10/64rem;
					margin-left: 5/64rem;
				}
			}
			.god_prefect_reply_list {
				min-height: 550/64rem;
				width: (640-80)/640*100%;
				margin-left: 40/64rem;
				background: url('../../../../static/images/11/reply_background.png') no-repeat;
				background-size: cover;
				margin-top: 26/64rem;
				.reply_list_content {
					width: 500/640*100%;
					margin: 0 auto;
					padding-top: 24/64rem;
					font-size: 30/64rem;
					p {
						span {
							color: #b676eb;
							line-height: 64/64rem;
						}
					}
					p+span {
						line-height: 78/64rem;
						color: #959595;
					}
					p+span+span {
						color: #959595;
						float: right;
						line-height: 78/64rem;
					}
					&::after {
						content: '';
						display: block;
						border-bottom: 1/64rem solid #ddd;
						margin-top: 24/64rem;
					}
				}
				.see_more_reply {
					height: 85/64rem;
					width: 100%;
					color: #b676eb;
					p:first-child {
						margin-top: 30/64rem;
						float: left;
						font-size: 30/63rem;
						margin-left: 30/64rem;
					}
					p:last-child {
						float: right;
						font-size: 30/63rem;
						margin-top: 30/64rem;
						margin-right: 30/64rem;
						position: relative;
						&::before {
							content: '';
							display: inline-block;
							height: 30/64rem;
							width: 30/64rem;
							background: url('../../../../static/images/11/my_say.png') no-repeat;
							background-size: contain;
							position: absolute;
							top: 5/64rem;
							left: -40/64rem;
						}
					}
				}
			}
		}
	}
	/*回复样式*/
	
	.more_reply {
		font-size: 25/64rem;
		margin-left: 35/64rem;
		line-height: 80/64rem;
	}
	/*全部评论样式*/
	
	.clips_comment_gods_all {
		.clips_comment_gods .clips_comment_gods_perfect .god_perfect_title;
		.clips_comment_all_content {
			.comment_all_content_left {
				.clips_comment_gods .clips_comment_gods_perfect .god_prefect_icon .god_prefect_icon_left;
			}
			.comment_all_content_user {
				.clips_comment_gods .clips_comment_gods_perfect .god_prefect_icon .god_prefect_user;
			}
			.comment_all_content_like {
				.clips_comment_gods .clips_comment_gods_perfect .god_prefect_icon .god_prefect_like;
			}
			.comment_all_content_share {
				.clips_comment_gods .clips_comment_gods_perfect .god_prefect_icon .god_prefect_share;
			}
			.comment_all_content_cont {
				.clips_comment_gods .clips_comment_gods_perfect .god_prefect_icon .god_prefect_content;
			}
		}
		.clips_comment_gods_box {
			margin-top: 12/64rem;
			padding-top: 10/64rem;
			height: 80/64rem;
			width: 105%;
			margin-left: -15/64rem;
			background: url('../../../../static/images/11/down_background.png') no-repeat;
			.comment_gods_box_input {
				height: 65/64rem;
				width: (640-60)/640*100%;
				margin: 0 auto;
				background: url('../../../../static/images/11/bottom_input.png') no-repeat;
				border-radius: 10/64rem;
				position: relative;
				.box_input_icon {
					height: 40/64rem;
					width: 40/64rem;
					background: url('../../../../static/images/11/bottom_input_icon.png') no-repeat;
					background-size: cover;
					position: absolute;
					top: 15/64rem;
					left: 10/64rem;
				}
				input {
					height: 65/64rem;
					width: 100%;
					border-radius: 10/64rem;
					outline: none;
					color: #7b7781;
					font-size: 26/64rem;
					text-indent: 70/64rem;
					border: 0;
				}
			}
		}
	}
	
	.clear {
		clear: both;
	}
	
	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}
	
	body {
		line-height: 1;
	}
	
	ol,
	ul {
		list-style: none;
	}
	
	blockquote,
	q {
		quotes: none;
	}
	
	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	a {
		color: inherit;
		text-decoration: none;
	}
	
	body {
		background: #f0f2f5;
		font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
		font-size: 25/64rem;
		color: #444;
	}
</style>